<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>HR详情</title>
		<script src="../../script/jquery.min.js" type="text/javascript"></script>
		<script src="../../script/mui.min.js"></script>
		<script type="text/javascript" src="../../script/echarts.min.js"></script>
		<script src="../../script/timecontrol.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/timecontrol.min.css"/>
		<script src="../../script/common.js"></script>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<link href="../../css/mui.min.css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.date {
				display: inline-block;
				width: 50%;
			}
			input[type=text] {
				display: inline-block;
				width: 50%;
				border: none;
				color: #646464;
			}
			.selectClass .wraptop {
				position: relative;
				width: 100%;
				background: #fff;
				/*z-index: 999;*/
			}
			.selectClass .dropdown {
				top: 10px;
				left: 50%;
				width: 70%;
				height: 40px;
				border: 1px solid #d9d9d9;
				margin: 10px 20px;
				line-height: 40px;
			}
			.selectClass .sanjiao {
				display: inline-block;
				width: 40px;
				height: 100%;
				float: right;
				border-left: 1px solid #d9d9d9;
				position: relative;
			}
			.selectClass .sanjiao img {
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}
			.selectClass .className {
				text-indent: 20px;
			}
			.selectClass .droplist {
				position: absolute;
				width: 71%;
				left: 53px;
				/*bottom: 0px;*/
				/*right: 0px;*/
				top: 50px;
				border-radius: 0px;
				opacity: 1;
				/*z-index: 1000;*/
			}
			.selectClass .span1 {
				margin-top: 19px;
			}
			.mui-btn-blue, .mui-btn-primary, input[type=submit] {
				color: #fff;
				background-color: #FF9900;
				border: 1px solid #FF9900;
			}
			.icon-img{
				width: 30px;
				margin-top: 6px;
			}
			.numberDetails .my-table tr td {
			    display: inline-block;
			     width: 100px; 
			    height: 42px;
			    line-height: 42px;
			    margin-right: 2px;
			}
			#BarAppearance{
				z-index: 1000;
			}
			.base_navigation_bar{
				z-index: 1000;
			}
			.competition-top-tag {
				background-size: 30px;
				background-image: url(../../image/icon_screen_hr.png);
				background-position: center left;
				background-repeat: no-repeat;
				padding-left: 34px;
				font-size: 14px;
				color: #000000;
				line-height: 30px;
			}
			#classificationDivId{
			  padding-left: 15px;
			  padding-right: 10px;        
			  padding-top: 10px;
			  padding-bottom: 10px;
			  background-color: #fff
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span>查看签到详情</span>
			<a class="base_right_item base_hide_item" href="#"> </a>
		</div>
		<div  class="  " style="margin-top: 66px">
			<div class=" top_54" >
				<ul class="mui-table-view ">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;"> <img class="mui-media-object mui-pull-left " src="../../image/icon_zhong.png" >
						<div data-role="fieldcontain" class="timecontrol " id=""  >
							<input type="text" id="time" class="timeipt" />
						</div> </a>
					</li>
				</ul>
			</div>
			 <div  id="classificationDivId">
			<div class="competition-top-tag"  id="classificationId" >
			选择:全部
			</div>
			</div>
			<!--<div class="selectClass clearfix">
				<div id="" class="wraptop">
					<span class="left span1">班级</span>
					<div class="dropdown left" id="dropdownbtn">
						<span id="className" class="className"  value="" ></span>
						<span class="sanjiao"><img src="../../image/icon_sanjiao.png" alt=""></span>
					</div>
					<div id="dropdownlist" class="mui-popover droplist">
						<ul id = "classgroup" class="mui-table-view" style="background: #FFFFFF">
						</ul>
					</div>
				</div>
			</div>-->
			<div >
				<div class="noSign" hidden="hidden" id="noData">
					<img src="../../image/icon_img.png" width="60%">
					<p class="font16 top_15 base_dark_grey" >
						暂无数据
					</p>
				</div>
				<div class="loadFailure" hidden="hidden" id="noNet">
					<img src="../../image/icon_img01.png" width="60%">
					<p class="" >
						数据加载失败
					</p>
					<p>
						请检查您的网络
					</p>
					<button type="button" class="mui-btn mui-btn-outlined" onclick="loadClassData()">
						重新加载
					</button>
				</div>
			</div>
			<div id="sgin_chart_detail">
				<div id="sgindetail" >
					<div class="numberDetails">
						<div class="number-title">
							签到人员状态
						</div>
						<table id="sginDetailList" class="my-table">
							<tr class="th">
								<td>姓名</td>
								<td>状态</td>
								<td>心情</td>
							</tr>
							<!-- <tr class="yqd">
								<td>张三</td>
								<td>已签到</td>
								<td><img class="icon-img" src="../../image/emoji_gaoxing.png"></td>
							</tr>
							<tr class="wqd">
								<td>王五</td>
								<td>未签到</td>
								<td><img class="icon-img" src="../../image/emoji_gaoxing.png"></td>
							</tr> -->
						</table>
					</div>
					<div class="detailsBtn">
						<button id="toSginBingTu" type="button" class="mui-btn mui-btn-primary" onclick="" >
							查看图表
						</button>
						<p>
							注：仅统计实习中的学生
						</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script src="../../script/timecontrol.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script src="../../script/common.js"></script>
	<!--  <script type="text/javascript" src="../../script/databaseOperation.js"></script> -->
	<script>

		var currentClassData = new Object();
		var categoryIsShow = false;
		 var cid = '';//企业id
		 var gid = '';//岗位id
		apiready = function() {
			
			SendBehaviorTrajectoriesNotifi1('0', '企业HR签到详情', '255',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
			//设置时间
			setupTimeControl();
			//点击事件
			setupDetailClick();
	          loadClassData();
			 setupNotifi();
			 onSelectCategoryClick();
		}
		function backClick() {
			SendBehaviorTrajectoriesNotifi1('1', '企业HR签到详情', '255',api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname,  document.title);
			api.closeWin({
			});
		}

		

		function setupDetailClick() {
			$('#toSginBingTu').click(function() {
				api.openWin({useWKWebView:true,
					name : 'HRcheckSignWindow',
					url : 'HRcheckSignWindow.html'
				});
			});
		}

	
		
		function setupTimeControl() {
			var currenttime = new currentTime();
			//当前时间   currenttime.currentDate当前日期 currenttime.currentTime当前时间  currenttime.currentDatetime当前日期时间
			var curr = currenttime.year
			function init() {
				// 如需修改类型 date是年月日 time是24小时时间 datetime是时期和时间
				$('#time').mobiscroll().date({
					dateFormat : 'yyyy-mm-dd',
					lang : 'zh',
					startYear : curr - 5, //开始年份
					endYear : curr + 0//结束年份
				});
			}

			init();
			// 时间控件
			$("#time").val(currenttime.currentDate)
			$("#time").change(function() {
				var setDate = $("#time").val();
				var d = new Date(Date.parse(setDate.replace(/-/g, "/")));
				var curDate = new Date();
				if (d > curDate) {
					api.toast({
						msg : '请选择正确的日期！'
					});
					$("#time").val(currenttime.currentDate)
				}
				//				$('#sgindetail').hide();
				loadClassData();
			})
		}

		function timeStampWithString(timeString) {
			var tempStr = timeString.replace(/-/g, '/');
			var newTime = new Date(tempStr);
			return newTime.getTime() / 1000;
		}

		
		//获取班级数据
		function loadClassData(){
			postprogress();

			var sgintime = timeStampWithString($('#time').val());
			cfnetppPOST(urlhrseesign, {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				sgintime : sgintime,
				cid :cid,
				gwid:gid
			}, true, function(data, status) {
				api.hideProgress();
				if (status == 'success') {//获取网络
					if (data.code == 200) {
						currentClassData = data.json;
					
						setupSginDetail();
						$('#noData').hide();
						$('#noNet').hide();
					} else {
						$('#noData').show();
						$('#noNet').hide();
						$('#sgin_chart_detail').hide();
						api.toast({
							msg : '暂无数据',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					$('#noData').hide();
					$('#noNet').show();
					$('#sgin_chart_detail').hide();
					api.toast({
						msg : '获取失败!请检查网络',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function setupSginDetail() {
			var sginlist = currentClassData.sginlist;
			if (sginlist != null && sginlist.constructor == Array && sginlist.length > 0) {
				$('#sgindetail').show();
				var sginlistHtmlString = '<tr class="th"><td>姓名</td><td>状态</td><td>心情</td></tr>';
				for (var i = 0; i < sginlist.length; i++) {
					var sginStudent = sginlist[i];
					sginlistHtmlString += sginCellHtmlString(sginStudent);
				}
				$('#sginDetailList').html(sginlistHtmlString);
			} else {
				$('#sgindetail').hide();
				ShowToast('暂无本班数据');
			}
		}

		function sginCellHtmlString(sginData) {
			var classStr = sginData.sginstatus == 1 ? 'yqd' : 'wqd';
			var sginStatus = sginData.sginstatus == 1 ? '已签到' : '未签到';
			var feel = 'unknow';
			if (sginData.mood == 1) {//高兴
				feel = 'gaoxing';
			}else if (sginData.mood == 2) {//愤怒
				feel = 'fennu';
			}else if(sginData.mood == 3){//忧虑
				feel = 'youlv';
			}else if(sginData.mood == 4){//普通
				feel = 'putong';
			}else if(sginData.mood == 5){//难过
				feel = 'nanguo';
			}
			return '<tr class="' + classStr + '">' + '<td>' + sginData.srealname + '</td>' + '<td>' + sginStatus + '</td>' + '<td><img class="icon-img" src="../../image/emoji_' + feel + '.png"></td>' + '</tr>';
		}

		function postprogress() {
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '加载中...',
				text : '请稍候...',
				modal : false
			});
		}
			function onSelectCategoryClick(){
		
		$('#classificationId').unbind('click');
		$('#classificationId').click(function(event){
		
			if (categoryIsShow == true) {
				api.setFrameAttr({
				    name: 'CourseCategoryWind',
				    hidden: true
				});
				categoryIsShow = false;
			}else{
				var y = $(".mui-table-view").height()+$("#classificationDivId").height()+86;
		        var h = api.winHeight - y;
				api.openFrame({
				    name: 'CourseCategoryWind',
				    url: 'CourseCategoryWind.html',
				    rect: {
				        x: 0,
				        y: y,
				        w: 'auto',
				        h: h
				    },
				    bounces: false,
				    bgColor:'rgba(0,0,0,.3)'

				});
				api.setFrameAttr({
				    name: 'CourseCategoryWind',
				    hidden: false
				});
				categoryIsShow = true;
			}
			})
		}
		 function setupNotifi(){

			api.addEventListener({
			    name: 'jobCategoryNotifi'
			}, function(ret, err) {
			    cid = ret.value.cId;
				gid = ret.value.gId;
				var CategoryTitle = ret.value.cTitle;
				var warehouse = ret.value.warehouse;
				if(parseInt(cid) == 0){//全部企业
				$('#classificationId').text("选择: "+"全部");
				}else if(parseInt(gid) == 0){//全部岗位
				$('#classificationId').text("选择: "+warehouse);
				} else{
				  	$('#classificationId').text("选择: "+warehouse+"-"+CategoryTitle);
				}
                 
				categoryIsShow = false;
		
			loadClassData();
			});
		}
	</script>
</html>
